<template>
  <div style="margin-top: 20px">
    <transition name="el-fade-in-linear">
      <div v-if="show" class="transition-box">
        <div>
          <el-breadcrumb
            style="margin: 5px 0px 0px 30px"
            separator-class="el-icon-arrow-right"
          >
            <el-breadcrumb-item :to="{ path: '/userInformation' }"
              >首页</el-breadcrumb-item
            >
            <el-breadcrumb-item>店铺管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品列表</el-breadcrumb-item>
          </el-breadcrumb>
          <table border="0" style="margin: 50px auto 0px" cellspacing="0">
            <tr>
              <th>商品图片</th>
              <th>商品名称</th>
              <th>商品类型</th>
              <th>起拼量</th>
              <th>原价</th>
              <th>拼团价</th>
              <th style="width: 153px">操作</th>
              <th>参与秒杀</th>
            </tr>
            <tr
              v-for="(item, index) in newFoodList"
              :key="index"
              style="height: 120px"
            >
              <td style="text-align: center">
                <img
                  style="width: 80px"
                  :src="
                    'https://www.liufengtec.com/FoodWeb/' + item.picturelink
                  "
                  alt=""
                />
              </td>
              <td style="text-align: center; width: 100px">
                {{ item.foodname }}
              </td>
              <td style="text-align: center; width: 80px">
                {{ item.foodtypename }}
              </td>
              <td style="text-align: center; width: 60px">
                {{ item.pinnum }}
              </td>
              <td style="text-align: center; width: 100px">
                <input
                  type="text"
                  v-model="item.foodprice"
                  style="width: 50px; text-align: center"
                />
              </td>
              <td style="text-align: center; width: 100px">
                <input
                  type="text"
                  v-model="item.foodprice1"
                  style="width: 50px; text-align: center"
                />
              </td>

              <td style="text-align: center">
                <button
                  slot="reference"
                  style="
                    width: 75px;

                    background-color: #e31939;
                    color: white;
                  "
                  @click="openDialog(item)"
                >
                  删除
                </button>
                <el-dialog
                  title="提示"
                  :visible.sync="centerDialogVisible"
                  width="30%"
                  center:true
                >
                  <span>确定删除:{{openValue.foodname}}?</span>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="centerDialogVisible = false"
                      >取 消</el-button
                    >
                    <el-button type="primary" @click="confirm(openValue.foodId)"
                      >确 定</el-button
                    >
                  </span>
                </el-dialog>
              </td>
              <td style="text-align: center; width: 60px; padding: 0px 30px">
                <input
                  type="checkbox"
                  style="height: 18px; width: 20px; color: red"
                />
              </td>
            </tr>
            <tr>
              <td colspan="9" style="background-color: #fff">
                <el-pagination
                  style="text-align: center"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page.sync="currentPage1"
                  :page-size="10"
                  layout="total, prev, pager, next"
                  :total="foodList.length"
                >
                </el-pagination>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div class="showLogin" v-else>
        <img src="../../assets/loginImage.gif" alt="login" />
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {},
      foodList: [],
      newFoodList: [],
      currentPage1: 1,
      show: false,
      centerDialogVisible: false,
      openValue:{}
    };
  },
  created() {
    this.getUser();
    this.getUserList();
  },
  mounted() {},
  methods: {
    getUser() {
      this.user = JSON.parse(window.sessionStorage.getItem("user"));
    },
    getUserList() {

      // 请求列表
      this.$http
        .get(
          "FoodWeb/getFoodListAction.action",
          { params: { userid: this.user.userId, token: this.user.token } },
          { dataType: "json" }
        )
        .then((res) => {
          this.foodList = res.data.foodList;
          this.newFoodList = res.data.foodList.slice(0, 10);
          this.show = true;
          console.log(res);
        });
    },
    handleCurrentChange(res) {
      // 分页列表
      this.newFoodList = this.foodList.slice(res * 10 - 10, res * 10);
      console.log(res);
    },
    handleSizeChange(res) {
      // 返回当前页
      console.log(res);
    },
    edit(scope) {
      // 跳转修改页加传参
      console.log(scope);
    },
    
    confirm(changeId) {
       this.centerDialogVisible = false;
       console.log(changeId)
      // 删除
      this.$http
        .get("FoodWeb/deleteFoodAction.action", {
          params: {
            foodid:changeId,
            userid: this.user.userId,
            token: this.user.token,
          },
        })
        .then((result) => {
          if (result.data.errorcode == 0) location.reload();
        });
    },
    openDialog(v) {
      this.centerDialogVisible = true;
      this.openValue = v;
    },
  },
};
</script>

<style lang="less" scoped>
// table tr:nth-child(even) {
//   background: #f8f8f8;
// }
.showLogin {
  width: 400px;
  margin: 50px auto 0px;
}
</style>